<template>
<div v-bind:id=id v-bind:data=data></div>
</template>

<script>
    export default {
        name: "linegraph",
      data(){
          return {
            chartLineGraph:null
          }
      },
      props:['id','data'],
      watch:{
          data:{
            handler(newValue,oldValue){
              this.drawLineGraph(this.id,newValue)
            },
            deep:true
          }
      },
      mounted:function () {
        this.drawLineGraph(this.id,this.data)
      },
      methods:{
        handleZoom(name ,type) {
          this.chartLineGraph.dispatchAction({
            type: type === 'close' ? 'downplay' : 'highlight',
            name: name
          })
        },
        drawLineGraph(id,data){
          let _this=this;
          let myChart=document.getElementById(id);
          this.chartLineGraph=this.$echarts.init(myChart);
          this.chartLineGraph.setOption (data );
          window.addEventListener('resize', function () {
            _this.chartLineGraph.resize()

          });

        }
      },
      beforeDestroy(){
          if(this.chartLineGraph){
            this.chartLineGraph.clear()
          }
      }
    }
</script>

<style scoped>

</style>
